import { RowComponent } from './../row/row.component';
import { Component, OnInit,ElementRef, Input} from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { isParentAttr } from '../shared/utils/index';


@Component({
  selector: 'el-col',
  templateUrl: './col.component.html'
})
export class ColComponent implements OnInit {
  [key:string]: any;
  private sanitizer:any;
  private el:any;
  private root:any;
  nativeClass: string = ' ';

  //栅格占据的列数
  @Input() span:number = 0;
  //栅格左侧的间隔格数
  @Input() offset:number = 0;
  //栅格向右移动格数
  @Input() push:number = 0;
  //栅格向左移动格数
  @Input() pull:number = 0;
  //<768px 响应式栅格数或者栅格属性对象
  @Input() xs:any;
  //≥768px 响应式栅格数或者栅格属性对象
  @Input() sm:any;
  //≥992px 响应式栅格数或者栅格属性对象
  @Input() md:any;
  //≥1200px 响应式栅格数或者栅格属性对象
  @Input() lg:any;
  //≥1920px 响应式栅格数或者栅格属性对象
  @Input() xl:any;

  gutterFromParent: number = 0;

  constructor(sanitizer: DomSanitizer, el: ElementRef,root:RowComponent) { 
    this.sanitizer = sanitizer;
    this.el = el;
    this.root = root;
    this.nativeClass += this.el.nativeElement.classList.value;
    
  }
  

  ngOnInit(): void {
    this.gutterFromParent = this.root.gutter || 0;
  }


  classListFuc(){
    var _this = this;
    var /** @type {?} */ makeClass = function (key:any) { return key !== 'span'
    ? " el-col-" + key + "-" + _this[key]
    : " el-col-" + _this[key]; };
    
    var /** @type {?} */ classStr = ['span', 'offset', 'pull', 'push'].reduce(function (pre, next) { return !_this[next]
        ? pre
        : pre + makeClass(next); }, 'el-col');

   
    return classStr + this.nativeClass;
  }

  gutterStyle() {
    var /** @type {?} */ styleStr = '';
    if (this.gutterFromParent) {
        styleStr += "padding-left: " + this.gutterFromParent / 2 + "px;";
        styleStr += "padding-right: " + this.gutterFromParent / 2 + "px;";
    }
    return this.sanitizer.bypassSecurityTrustStyle(styleStr);
  }


  sizeClassList() {
      var _this = this;
      var /** @type {?} */ makeClass = function (key:any) {
          var /** @type {?} */ props = _this[key] || {};
          return Object.keys(props).map(function (prop) { return prop !== 'span'
              ? "el-col-" + key + "-" + prop + "-" + props[prop]
              : "el-col-" + key + "-" + props[prop]; }).join(' ');
      };
      var /** @type {?} */ classStr = ['xs', 'sm', 'md', 'lg', 'xl'].reduce(function (pre, next) { return !_this[next] ?
          pre : typeof _this[next] === 'object'
          ? pre + " " + makeClass(next)
          : pre + " el-col-" + next + "-" + _this[next]; }, '');
      return classStr;
  }
}
